﻿@page "/progresss"
@inject IStringLocalizer<Progresss> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Progress">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="0"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="25"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P3"]" Introduction="@Localizer["P4"]" Name="DispalyValue">
    <Progress Value="25" IsShowValue="true"></Progress>
</DemoBlock>

<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="Height">
    <Progress Value="25" IsShowValue="true" Height="32"></Progress>
</DemoBlock>

<DemoBlock Title="@Localizer["P7"]" Introduction="@Localizer["P8"]" Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <Progress Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P9"]" Introduction="@Localizer["P10"]" Name="Stripe">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P11"]" Introduction="@Localizer["P12"]" Name="Dynamic">
    <div class="row g-3">
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="25" Color="Color.Success" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="50" Color="Color.Info" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="75" Color="Color.Warning" IsShowValue="true"></Progress>
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" Value="100" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <BootstrapInput TItem="int" @bind-Value="@Value" />
        </div>
        <div class="col-12">
            <Progress IsAnimated="true" IsStriped="true" @bind-Value="@Value" Color="Color.Danger" IsShowValue="true"></Progress>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
